<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>dropdown and menu icon animation</title>
  <link rel="stylesheet" href="./style.css" type="text/css" />
  <body>
    <div class="content">
      <div class="content-inner">
        <div id="icon-1" class="icon">
          <div id="dropdown-1" class="dropdown"></div>
        </div>
        <div id="icon-2" class="icon">
          <div id="dropdown-2" class="dropdown"></div>
        </div>
        <div id="icon-3" class="icon">
          <div id="dropdown-3" class="dropdown"></div>
        </div>
        <div id="icon-4" class="icon">
          <div id="dropdown-4" class="dropdown"></div>
        </div>
        <div id="icon-5" class="icon">
          <div id="menu-1" class="menu"></div>
        </div>
        <div id="icon-6" class="icon">
          <div id="menu-2" class="menu"></div>
        </div>
        <div id="icon-7" class="icon">
          <div id="menu-3" class="menu"></div>
        </div>
        <div id="icon-8" class="icon">
          <div id="menu-4" class="menu"></div>
        </div>
        <!--     <div id="icon-9" class="icon">
            <div id="submit-1" class="submit"></div>
          </div>
          <div id="icon-10" class="icon">
            <div id="submit-2" class="submit"></div>
          </div>
          <div id="icon-11" class="icon">
            <div id="submit-3" class="submit"></div>
          </div>
          <div id="icon-12" class="icon">
            <div id="submit-4" class="submit"></div>
          </div> -->
      </div>
    </div>

    <script>
      const drop1 = document.querySelector("#dropdown-1");
      const drop2 = document.querySelector("#dropdown-2");
      const drop3 = document.querySelector("#dropdown-3");
      const drop4 = document.querySelector("#dropdown-4");
      document.getElementById("icon-1").addEventListener("click", function () {
        drop1.classList.toggle("close");
      });
      document.getElementById("icon-2").addEventListener("click", function () {
        drop2.classList.toggle("close");
      });
      document.getElementById("icon-3").addEventListener("click", function () {
        drop3.classList.toggle("close");
      });
      document.getElementById("icon-4").addEventListener("click", function () {
        drop4.classList.toggle("close");
      });
    </script>
  </body>
</html>
